<template>
  <el-select
    class="pvtDropdown"
    v-model="curValue"
    :multiple="multiple"
    @change="handleChange"
  >
    <el-option
      v-for="item in items"
      :key="item.value"
      :label="item.text"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  value: {
    type: String,
    default: ''
  },
  localeStrings: {
    type: Object,
  },
  multiple: {
    type: Boolean,
  },
  fields: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:value'])
const handleChange = (value) => {
  if (props.multiple) {
    emit('update:value', value.join(','));
  } else {
    emit('update:value', value);
  }
}

const curValue = computed(() => {
  if (props.multiple) {
    return props.value ? props.value.split(',') : [];
  } else {
    return props.value;
  }
})

const items = computed(() => props.options.filter(text => !['srfname','srfvalue'].includes(text)).map(text => {
  return {
    text: getText(text),
    value: text,
  };
}))
const getText = (text) => {
  const item = props.fields.find(x => x.codeName === text);
  if (item) {
    return item.caption;
  }
  const value = text.toLowerCase().replace(/\s/g, '');
  return props.localeStrings[value] || text;
}
</script>
